<template>
  <gg-form-item :label="label" :message="message" :messageDisplay="messageDisplay" :labelWidth="localLabelWidth" :layout="localLayout" :isIcon="true"
    :iconTop="iconTop">
    <view class="gg-picker-date">
      <picker class="gg-picker-date-item" mode="date" :value="localVal" :start="startDate" :end="endDate" @change="bindDateChange"
        @cancel="bindPickerCancel" :fields="fields" @click="changeIconTop">
        <view class="gg-picker-date-text" v-if="localVal!=''">{{localVal}}</view>
        <view class="gg-picker-date-placeholder" v-else>{{placeholder}}</view>
      </picker>
    </view>
  </gg-form-item>
</template>

<script>
import MixinsPicker from '../mixins/mixins-picker.js';
export default {
  mixins: [MixinsPicker],
  name: "GgPickerDate",
  props: {
    //默认输入框
    value: {
      type: String,
      default: ""
    },
    startDate: {
      type: String,
      default: ""
    },
    endDate: {
      type: String,
      default: ""
    },
    fields: {
      type: String,
      default: "day"
    }
  },
  watch: {
    value(newValue) {
      this.localVal = this.value;
    }
  },
  data() {
    return {
      localVal: '',
      iconTop: false
    };
  },
  created: function () {
    this.localVal = this.value;
  },
  methods: {
    bindDateChange: function (e) {
      this.localVal = e.detail.value;
      this.$emit('input', this.localVal);
      this.iconTop = false
    }
  }
};
</script>

<style>
.gg-picker-date {
  min-height: 35px;
}
.gg-picker-date-item {
  height: 35px;
  line-height: 35px;
  float: left;
  margin-right: 10px;
  width: 100%;
}
.gg-picker-date-placeholder {
  color: grey;
}
</style>
